<template>
  <div class="app-container">
    <!-- 空间维护 -->
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <!-- 区域管理 -->
      <el-tab-pane label="区域管理" name="second">
        <div v-if="activeName == 'second'">
          <el-form size="small" :inline="true">
            <!-- <el-form-item label="校区名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="区域名称">
              <el-input
                v-model="form.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="small" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-folder-add"
                @click="showAddArea"
                >新增</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            size="medium"
            :data="tableDataArea"
            tooltip-effect="dark"
            style="width: 100%"
            border
          >
            <el-table-column
              type="index"
              label="#"
              align="center"
            ></el-table-column>
            <!-- <el-table-column prop="name" label="校区名称" align="center"></el-table-column> -->
            <el-table-column
              prop="name"
              label="区域名称"
              align="center"
            ></el-table-column>

            <el-table-column prop="handle" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-edit"
                  @click="showEditArea(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-delete"
                  @click="deleteArea(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog title="新增区域" :visible.sync="addArea" width="50%">
          <el-form>
            <!-- <el-form-item label="校区名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="区域名称">
              <el-input
                v-model="addAreaForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addArea = false">取 消</el-button>
            <el-button type="primary" @click="addAreaBtn">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="修改区域" :visible.sync="changeArea" width="50%">
          <el-form>
            <!-- <el-form-item label="校区名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="区域名称">
              <el-input
                v-model="changeAreaForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="changeArea = false">取 消</el-button>
            <el-button type="primary" @click="changeAreaBtn">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>

      <!-- 校区管理 -->
      <el-tab-pane label="校区管理" name="first">
        <div v-if="activeName == 'first'">
          <el-form size="small" :inline="true">
            <el-form-item label="校区名称">
              <el-input
                v-model="form.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search"
                >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="small" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-folder-add"
                @click="showAddCampus"
                >新增</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            size="medium"
            :data="tableDataCampus"
            tooltip-effect="dark"
            style="width: 100%"
            border
          >
            <el-table-column
              type="index"
              label="#"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="校区名称"
              align="center"
            ></el-table-column>

            <el-table-column prop="handle" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-edit"
                  @click="showEditCampus(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-delete"
                  @click="deleteCampus(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog title="新增校区" :visible.sync="addCampus" width="50%">
          <el-form>
            <el-form-item label="校区名称">
              <el-input
                v-model="addCampusForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addCampus = false">取 消</el-button>
            <el-button type="primary" @click="addCampusBtn">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="修改校区" :visible.sync="changeCampus" width="50%">
          <el-form>
            <el-form-item label="校区名称">
              <el-input
                v-model="changeCampusForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="changeCampus = false">取 消</el-button>
            <el-button type="primary" @click="changeCampusBtn">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>

      <!-- 楼栋管理 -->
      <el-tab-pane label="楼栋管理" name="third">
        <div v-if="activeName == 'third'">
          <el-form size="small" :inline="true">
<!--            <el-form-item label="校区名称">
              <el-input
                v-model="formBuilding.campusName"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>-->
            <el-form-item label="校区名称">
              <el-select
                v-model="formBuilding.campusId"
                placeholder="请选择校区"
                clearable
                @change="changeCampusOption"
                @clear="clearSelectCamous"
              >
                <el-option
                  v-for="item in CampusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="区域名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="楼栋名称">
<!--              <el-input
                v-model="formBuilding.name"
                placeholder="请输入"
                clearable
              ></el-input>-->
              <el-select
                v-model="formBuilding.name"
                placeholder="请选择楼栋"
                clearable
                @change="changeBuildingOption"
              >
                <el-option
                  v-for="item in BuildingOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search"
               @click="searchBuilding" >搜索</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button size="small" icon="el-icon-refresh" @click="resetBuilding">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-folder-add"
                @click="showAddBuilding"
                >新增</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            size="medium"
            :data="tableDataBuilding"
            tooltip-effect="dark"
            style="width: 100%"
            border
          >
            <el-table-column
              type="index"
              label="#"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="campusName"
              label="校区名称"
              align="center"
            ></el-table-column>
            <!-- <el-table-column prop="name1" label="区域名称" align="center"></el-table-column> -->
            <el-table-column
              prop="name"
              label="楼栋名称"
              align="center"
            ></el-table-column>

            <el-table-column prop="handle" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-edit"
                  @click="showEditBuilding(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-delete"
                  @click="deleteBuilding(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="totalBuilding"
                         :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
                         @size-change="handleSizeChange"></el-pagination>
        </div>

        <el-dialog title="新增楼栋" :visible.sync="addBuilding" width="50%">
          <el-form>
            <el-form-item label="校区名称">
              <el-select
                v-model="addBuildingForm.campusId"
                placeholder="请选择校区"
                clearable
              >
                <el-option
                  v-for="item in CampusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="区域名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="楼栋名称">
              <el-input
                v-model="addBuildingForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addBuilding = false">取 消</el-button>
            <el-button type="primary" @click="addBuildingBtn">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="修改楼栋" :visible.sync="changeBuilding" width="50%">
          <el-form>
            <el-form-item label="校区名称">
              <el-select
                v-model="changeBuildingForm.campusId"
                placeholder="请选择校区"
                clearable
              >
                <el-option
                  v-for="item in CampusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="区域名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="楼栋名称">
              <el-input
                v-model="changeBuildingForm.name"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="changeBuilding = false">取 消</el-button>
            <el-button type="primary" @click="changeBuildingBtn"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-tab-pane>

      <!-- 房间管理 -->
      <el-tab-pane label="房间管理" name="fourth">
        <div v-if="activeName == 'fourth'">
          <el-form size="small" :inline="true">
            <el-form-item label="校区名称">
              <el-input
                v-model="form.no"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="区域名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="楼栋名称">
              <el-input
                v-model="form.no"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="房间名称">
              <el-input
                v-model="form.no"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>

          <el-button size="small" type="primary" icon="el-icon-search"
            >搜索</el-button
          >

          <el-button size="small" icon="el-icon-refresh">重置</el-button>

          <el-button
            size="small"
            type="primary"
            icon="el-icon-folder-add"
            @click="showAddRoom"
            >新增</el-button
          >

          <el-divider></el-divider>

          <el-table
            size="medium"
            :data="tableDataRoom"
            tooltip-effect="dark"
            style="width: 100%"
            border
          >
            <el-table-column
              type="index"
              label="#"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="campusName"
              label="校区名称"
              align="center"
            ></el-table-column>
            <!-- <el-table-column prop="name1" label="区域名称" align="center"></el-table-column> -->
            <el-table-column
              prop="buildingName"
              label="楼栋名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="no"
              label="房间名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="floor"
              label="楼层"
              align="center"
            ></el-table-column>
            <el-table-column prop="handle" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-edit"
                  @click="showEditRoom(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  plain
                  icon="el-icon-delete"
                  @click="deleteRoom(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog title="新增房间" :visible.sync="addRoom" width="50%">
          <el-form>
            <el-form-item label="校区名称">
              <el-select
                v-model="addRoomForm.campusId"
                placeholder="请选择校区"
                clearable
              >
                <el-option
                  v-for="item in CampusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="区域名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="楼栋名称">
              <el-select
                v-model="addRoomForm.buildingId"
                placeholder="请选择楼栋"
                clearable
              >
                <el-option
                  v-for="item in BuildingOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间名称">
              <el-input
                v-model="addRoomForm.no"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="楼层">
              <el-input-number
                v-model="addRoomForm.floor"
                :min="-1"
              ></el-input-number>
              <!-- <el-input
                v-model="addRoomForm.floor"
                placeholder="请输入"
                clearable
              ></el-input> -->
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addRoom = false">取 消</el-button>
            <el-button type="primary" @click="addRoomBtn">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="修改房间" :visible.sync="changeRoom" width="50%">
          <el-form>
            <el-form-item label="校区名称">
              <el-select
                v-model="changeRoomForm.campusId"
                placeholder="请选择校区"
                clearable
              >
                <el-option
                  v-for="item in CampusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="区域名称">
              <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
            </el-form-item> -->
            <el-form-item label="楼栋名称">
              <el-select
                v-model="changeRoomForm.buildingId"
                placeholder="请选择楼栋"
                clearable
              >
                <el-option
                  v-for="item in BuildingOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="房间名称">
              <el-input
                v-model="changeRoomForm.no"
                placeholder="请输入"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="楼层">
              <el-input-number
                v-model="changeRoomForm.floor"
                :min="-1"
              ></el-input-number>
              <!-- <el-input
                v-model="changeRoomForm.floor"
                placeholder="请输入"
                clearable
              ></el-input> -->
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="changeRoom = false">取 消</el-button>
            <el-button type="primary" @click="changeRoomBtn">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>

    <!-- <el-pagination class="pagination" background layout="prev, pager, next" :total="total" :page-size="10"
      @current-change="handleCurrentChange"></el-pagination> -->
  </div>
</template>

<script>
import {
  addAreaBtn, //新增区域
  changeAreaBtn, //修改区域
  getArea, //查询区域
  deleteArea, //删除区域
  addCampusBtn, //新增校区
  changeCampusBtn, //修改校区
  getCampus, //查询校区
  getCampusOptions, //查询校区下拉
  getBuildingOptions,//查询楼栋下拉
  deleteCampus, //删除校区
  getBuildings, //查询楼栋
  changeBuildingBtn,//修改楼栋
  addBuildingBtn,//新增楼栋
  deleteBuilding//删除楼栋
} from "@/api/propertyManage/spaceManage/spaceKeep/index.js";

export default {
  data() {
    return {
      addCampus: false,
      changeCampus: false,
      addArea: false,
      changeArea: false,
      addBuilding: false,
      changeBuilding: false,
      addRoom: false,
      changeRoom: false,
      form: {
        name: "",
      },
      activeName: "second",
      formArea: {
        name: "",
        current: 0,
        pageSize: 10,
      },
      addAreaForm: {
        name: "",
      },
      changeAreaForm: {
        id: "",
        name: "",
      },
      formCampus: {
        name: "",
        current: 0,
        pageSize: 10,
      },
      addCampusForm: {
        name: "",
      },
      changeCampusForm: {
        id: "",
        name: "",
      },
      formBuilding: {
        campusId: "",
        name:"",
        campusName:"",
        current: 0,
        pageSize: 10,
      },
      addBuildingForm: {
        name: "",
      },
      changeBuildingForm: {
        //楼宇id
        id: "",
        //楼宇名称
        name: "",
        //校区id
        campusId:""
      },
      formRoom: {
        name: "",
        current: 0,
        pageSize: 10,
      },
      addRoomForm: {
        name: "",
      },
      changeRoomForm: {
        id: "",
        name: "",
      },
      tableDataArea: [],
      totalArea: 0,
      CampusOptions: [],
      tableDataCampus: [],
      totalCampus: 0,
      BuildingOptions: [],
      //楼栋数据
      tableDataBuilding: [],
      totalBuilding: 0,
      tableDataRoom: [],
      totalRoom: 0,
      //选中的校区id
      campusOptionId:{
        id:''
      }
    };
  },

  methods: {
    showAddCampus() {
      this.addCampus = true;
    },
    showAddArea() {
      this.addArea = true;
    },
    showAddBuilding() {
      this.addBuilding = true;
      this.getCampusOptions();
    },
    showAddRoom() {
      this.getCampusOptions();
    },
    //修改房间弹窗
    showEditRoom(e) {},
    //修改房间
    changeRoomBtn() {},
    //修改楼栋弹窗
    showEditBuilding(e) {
      this.changeBuilding = true;
      this.changeBuildingForm = JSON.parse(JSON.stringify(e));
    },
    //修改楼栋
    changeBuildingBtn() {
      changeBuildingBtn(this.changeBuildingForm).then((res) => {
        if (res.data.success == true) {
          this.$message({
            message: "修改成功!",
            duration: 1000,
            type: "success",
            onClose: () => {
              this.changeBuilding = false;
              this.getBuilding();
            },
          });
        }
      });
    },
    //修改校区弹窗
    showEditCampus(e) {
      this.changeCampus = true;
      this.changeCampusForm = JSON.parse(JSON.stringify(e));
    },
    //修改校区
    changeCampusBtn() {
      changeCampusBtn(this.changeCampusForm).then((res) => {
        if (res.data.success == true) {
          this.$message({
            message: "修改成功!",
            duration: 1000,
            type: "success",
            onClose: () => {
              this.changeCampus = false;
              this.getCampus();
            },
          });
        }
      });
    },
    //修改区域弹窗
    showEditArea(e) {
      this.changeArea = true;
      this.changeAreaForm = JSON.parse(JSON.stringify(e));
    },
    //修改区域
    changeAreaBtn() {
      changeAreaBtn(this.changeAreaForm).then((res) => {
        if (res.data.success == true) {
          this.$message({
            message: "修改成功!",
            duration: 1000,
            type: "success",
            onClose: () => {
              this.changeArea = false;
              this.getArea();
            },
          });
        }
      });
    },
    //删除校区
    deleteCampus(e) {
      this.$confirm("此操作将删除该校区, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteCampus({ id: e }).then((res) => {
            if (res.data.success == true) {
              this.$message({
                message: "删除成功!",
                duration: 1000,
                type: "success",
                onClose: () => {
                  this.getCampus();
                },
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除楼栋
    deleteBuilding(e) {
      this.$confirm("此操作将删除该楼栋, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteBuilding({ id: e }).then((res) => {
            if (res.data.success == true) {
              this.$message({
                message: "删除成功!",
                duration: 1000,
                type: "success",
                onClose: () => {
                  this.getBuilding();
                },
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除区域
    deleteArea(e) {
      this.$confirm("此操作将删除该区域, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteArea({ id: e }).then((res) => {
            if (res.data.success == true) {
              this.$message({
                message: "删除成功!",
                duration: 1000,
                type: "success",
                onClose: () => {
                  this.getArea();
                },
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //删除房间
    deleteRoom(e) {},
    //添加区域
    addAreaBtn() {
      addAreaBtn(this.addAreaForm).then((res) => {
        if (res.data.success == true) {
          this.addArea = false;
          this.$message({
            message: "添加成功!",
            duration: 1000,
            type: "success",
            onClose: () => {
              this.getArea();
            },
          });
        }
      });
    },
    //添加校区
    addCampusBtn() {
      addCampusBtn(this.addCampusForm).then((res) => {
        if (res.data.success == true) {
          this.addCampus = false;
          this.$message({
            message: "添加成功!",
            duration: 1000,
            type: "success",
            onClose: () => {
              this.getCampus();
            },
          });
        }
      });
    },
    //添加楼栋
    addBuildingBtn() {
      addBuildingBtn(this.addBuildingForm).then((res) => {
        if (res.data.success == true) {
          this.addBuilding = false;
          this.$message({
            message: "添加成功!",
            duration: 1000,
            type: "success",
            onClose: () => {
              this.getBuilding();
            },
          });
        }
      });
    },
    //添加房间
    addRoomBtn() {},
    //获取区域
    getArea() {
      getArea(this.formArea).then((res) => {
        if (res.data.success == true) {
          this.tableDataArea = res.data.data.list;
          this.totalArea = res.data.data.total;
        } else {
          this.tableDataArea = [];
        }
      });
    },
    //获取校区
    getCampus() {
      getCampus(this.formCampus).then((res) => {
        if (res.data.success == true) {
          this.tableDataCampus = res.data.data.list;
          this.totalCampus = res.data.data.total;
        } else {
          this.tableDataCampus = [];
        }
      });
    },
    //获取校区下拉
    getCampusOptions() {
      getCampusOptions().then((res) => {
        if (res.data.success == true) {
          this.CampusOptions = res.data.data;
        }
      });
    },
    //获取楼栋下拉
    getBuildingOptions() {
      getBuildingOptions(this.campusOptionId).then((res) => {
        if (res.data.success == true) {
          this.BuildingOptions = res.data.data;
        }
      });
    },
    //获取楼栋
    getBuilding() {
      getBuildings(this.formBuilding).then((res) => {
        if (res.data.success == true) {
          this.tableDataBuilding = res.data.data.list;
          this.totalBuilding = res.data.data.total;
        } else {
          this.tableDataBuilding = [];
        }
      });
    },
    //楼栋搜索
    searchBuilding(){
      this.getBuilding()
    },
    //重置楼栋（楼栋tab里触发重置)
    resetBuilding(){
      this.formBuilding={
        campusId: "",
        name:"",
        campusName:"",
        current: 0,
        pageSize: 10,
      }
      this.BuildingOptions=[]
      this.getBuilding()
    },
    //楼栋分页
    handleCurrentChange(e) {
      //当前页
      // console.log(e-1)
      this.formBuilding.current = e - 1
      this.getBuilding()
    },
    handleSizeChange(e) {
      this.formBuilding.pageSize = e
      this.getBuilding()
    },
    //获取房间
    getRoom() {},
    handleClick(tab, event) {
      console.log(tab.name);
      if (tab.name == "first") {
        this.getCampus();
      }
      if (tab.name == "second") {
        this.getArea();
      }
      if (tab.name == "third") {
        this.getCampusOptions();
        this.getBuilding();
      }
      if (tab.name == "fourth") {
        this.getRoom();
      }
    },
    //切换校区
    changeCampusOption(camId){
      //清空楼栋数据
      this.formBuilding.name=""
    console.log(camId);
    this.campusOptionId.id = camId
    this.getBuildingOptions();
    },
    clearSelectCamous(){
      this.BuildingOptions = []
    },
    //切换楼栋
    changeBuildingOption(val){
      console.log(val)
      console.log(this.BuildingOptions)
      // value就是选中项的id
      const selectedItem = this.BuildingOptions.find(item => item.id === val);
      if (selectedItem) {
        this.formBuilding.name= selectedItem.name; // 输出选中项的name值
      }
    }
  },
  created() {
    this.getArea();
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
